<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap-select.css" rel="stylesheet">
<link rel="stylesheet" href="../css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="../css/bootstrap-treeview.min.css">
<link href="../css/bootstrap-table.css" rel="stylesheet">
<link href="../css/bootstrap-table-fixed-columns.css" rel="stylesheet">
<link href="../css/font-awesome.min.css" rel="stylesheet">
<link href="../css/JyyCommon.css" rel="stylesheet">
<link href="../css/JyyTable.css" rel="stylesheet">
<link href="../css/JyyTree.css" rel="stylesheet">
<link href="../css/JyyMsgBox.css" rel="stylesheet">
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="../js/jquery.form.min.js"></script> 
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-paginator.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-treeview.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-select.js"></script>
<script type="text/javascript" src="../js/bootstrap-table.js"></script>
<script type="text/javascript" src="../js/bootstrap-table-fixed-columns.js"></script>
<script type="text/javascript" src="../js/jyy_modal.js"></script>
<script type="text/javascript" src="../js/JyyCommon.js"></script>
<script type="text/javascript" src="../js/JyyTable.js"></script>
<script type="text/javascript" src="../js/JyyTree.js"></script>
<script type="text/javascript" src="../js/JyyMsgBox.js"></script>
<script type="text/javascript" src="../js/JyyLoading.js"></script>
<script type="text/javascript" src="../js/echarts.js"></script>
<script type="text/javascript" src="../js/xm-select.js"></script>
<style type="text/css">
body, html{
	width: 100%;
	height: 100%;
}
.selBtn {
	float:left;
	margin-left:20px;
	height:30px;
	width:70px;
	background-color:#1890FF;
	border-radius:5px;
	border: 0px;
	color:white;
}
.select{
	float:left;
	margin-left:20px;
	height:30px;
	width:70px;
	background-color:#1890FF;
	border-radius:5px;
	border: 0px;
	color:white;
}
.bootstrap-select:not(.input-group-btn), .bootstrap-select[class*="col-"] {
	float: left;
}
.show{
	box-shadow: 0 0.05rem 1rem rgba(0,0,0,0.15)!important;
	margin-left:24px;
}
.shodow{
	box-shadow: 0 0.05rem 1rem rgba(0,0,0,0.15)!important;
	margin-left:24px;
}
#selectunit .xm-label-block{
	background-color:'#409FF' ;
}
</style>
</head>
<body>

<div style="overflow-y: auto;overflow-x: hidden;width: 100%;height: 100%;">
	<div style="height: 50px;width: calc(100% - 20px);">
		<div class="col-md-12" style="padding-left: 5px;padding-right: 5px;margin-top: 10px;margin-left: 20px;">
			<label class="control-label col-sm-1" style="float: left;margin-top: 7px;padding: 0px;width: 40px;font-weight: normal;">年份</label>
			<select class="form-control selectpicker" title="请选择年份" data-width="100px" id="yearSel" style="float: left;margin-top: -3px;padding: 5px;font-weight: normal;"></select>
			<label class="control-label col-sm-1" style="float: left;margin-top: 7px;padding: 0px;width: 53px;font-weight: normal;margin-left:26px;">节点名称</label>
			<div  id="selectunit" style="float: left;margin-top: -7px;padding: 5px;width: 197px;font-weight: normal;"></div>
			<button class="selBtn" onclick="select()">查询</button>
		</div>
	</div>
	
	<div id="yearRenewable"  class= "show" style="width:calc(100% - 40px);min-height: 272px;position: relative;margin-bottom: 10px;">
	<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">节点电源容量统计</span>
		</p>
	<div id="echars" style="width:100%;height:298px;display:inline-block;margin-top:-3px;margin-left:0px"></div>
	</div>
	<div style="height: 44px;width: calc(200% - 20px);">
		<div class="col-md-12" style="padding-left: 5px;padding-right: 5px;margin-top: 10px;margin-left: 20px;">
			<label class="control-label col-sm-1" style="float: left;margin-top: 7px;padding: 0px;width: 40px;font-weight: normal;">年份</label>
			<select class="form-control selectpicker" title="请选择年份" data-width="100px"  id="year" style="float: left;margin-top:-3px;padding: 5px;font-weight: normal;"></select>
			<label class="control-label col-sm-1" style="float: left;margin-top: 7px;padding: 0px;width: 53px;font-weight: normal;margin-left:26px;">机组类型</label>
			 <div  id="selectpower" style="float: left;margin-top: -7px;padding: 5px;width: 197px;font-weight: normal;margin-left:-2px;"></div>
			<button class="select" onclick="selectpower()">查询</button>
		</div>
	</div>
	<div id="yearRenewable" class="shodow"style="width: calc(100% - 40px);min-height: 272px;position: relative;margin-bottom: 20px;">
	<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">节点电源容量分布</span>
		</p>
	<div id="powerechars" style="width:100%;height:345px;margin-top:-24px;margin-left:0px;" ></div>
	</div>
	

</div>
</body>
<script type="text/javascript">
var projectId=this.getQueryString('projectId');
var colorList = ["#F01B2D", "#00B0F0", "#92D050", "#FFC000", "#FFE957", "#8FFAF7"];
var typeList = [1, 4, 11, 12, 13, 14];
var typenameList = ["火电", "水电", "风电", "光伏", "光热", "储能"];
$(function(){
	getProject();
	
})
function getProject() {
    $.ajax({
    	url : "../g/service/Sample/Energysaving",
    	 type:'post',
         contentType: 'application/json; charset=utf-8',
         data:JSON.stringify({"planid" : projectId }),
         success : function(data){
        	/*  var uu =data.get("iyear"); */
        	 var selectedId = "";
             $.each(data.iyear, function(i,val){
            	 $("#yearSel").append("<option value ='"+val+"'>"+val+"</option>");
            	 $("#year").append("<option value ='"+val+"'>"+val+"</option>");
            	 if(i==0) selectedId = val;
             });
             $('.selectpicker').selectpicker('refresh');
             $('#yearSel').selectpicker('val',selectedId);
             $('#year').selectpicker('val',selectedId);
             nodename();
         	 powername();
         }
    })
}
function powername() {
    $.ajax({
    	url : "../g/service/Sample/getpowername",
    	 type:'post',
         contentType: 'application/json; charset=utf-8',
         data:JSON.stringify({"planid" : projectId }),
         success : function(data){
        	var dataList = [];
             $.each(data.iyear, function(i,val){
            	 dataList.push({"name":val, "value":val})

             });
             demo1= xmSelect.render({
            		el:'#selectpower',
            		initValue:['风电'],
            		theme: {
            			color: '#409EFF',
            		},
            		toolbar: {
            	        show: true,
            	        list: ['ALL', 'CLEAR']
            	    },
               	    height:"200px",
            		language: 'zn',
            		data: dataList,
            	})
            
           selectpower(); 	
            	
         }
    })
    } 
function nodename() {
    $.ajax({
    	url : "../g/service/Sample/getNodename",
    	type:'post',
        contentType: 'application/json; charset=utf-8',
        data:JSON.stringify({"planid" : projectId }),
        success : function(data){
        	/*  var uu =data.get("iyear"); */
        	var dataList = [];
            $.each(data.iyear, function(i,val){
            	dataList.push({"name":val, "value":val})
            });
            demo = xmSelect.render({
           		el: '#selectunit',
           		initValue:[data.iyear[0]],
           		filterable: true,
           		theme: {
           			color: '#409EFF',
           		},
           		toolbar: {
           	        show: true,
           	        list: ['ALL', 'CLEAR']
           	    },
              	height:"200px",
           		language: 'zn',
           		data: dataList
           	}) 
           	select();
		}
    })
}

function select(){
	var nodename=demo.getValue();
    var year = document.getElementById("yearSel").value;
    echars(nodename,year);
}
function selectpower(){
	var nodename=demo1.getValue();
    var year = document.getElementById("yearSel").value;
    powerechars(nodename,year);
}
function powerechars(nodename,year) {
    $.ajax({
    	url : "../g/service/Sample/powerechars",
    	type:'post',
        contentType: 'application/json; charset=utf-8',
        data:JSON.stringify({"planid" : projectId ,"nodename": nodename , "yearid": year}),
        success : function(data){
     		var seriesData = [];
    		for(var i = 0; i < data.seriesData.length;i++) {
    			var name = data.seriesData[i].name;
    			var series = data.seriesData[i].series;
    			seriesData.push({
    				name: name,
    				type: 'bar',
    			    stack: '总',
    				itemStyle: {
    			        color: colorList[typeList.indexOf(data.seriesData[i].id)]
    		      	},
    			    data: series
    			});
    		}
        	 
        	var app = {};

       		var chartDom = document.getElementById('powerechars');
       		var myChart = echarts.init(chartDom);
       		var option;

       		option = {
   				legend: {},
   				tooltip: {},
   				grid: {
   	            	left: '3%',
   	              	right: '5%',
   	              	bottom:'4%',
   	              	containLabel: true
   	            },
   				toolbox: {
   					show: true,
   					right: 30,
   					itemSize: 20,
   					itemGap: 12,
   				    feature: {
   				    	myTool: {
			        		show: true,
			        		title: "导出为Excel",
			        		icon: 'image://../images/excel.png',
			        		onclick: (o) => {
								var option = o.option;
								var dataSource = [];
								var dataType = "\uFEFF"; //解决乱码问题
								dataType += option.xAxis[0].name+",";  //添加表格的头
								if(option.series.length > 0) {
									for(var i = 0;i < option.series.length;i++) {
										dataType += option.series[i].name+","
									}
									dataType = dataType.substr(0, dataType.length-1)
								}
								dataType += '\n'; // 以上是导出的Excel文件头部

								for(var i = 0;i < option.xAxis[0].data.length;i++) {
									var arr = [];
									for(var j = 0;j < option.series.length+1;j++) {
										if(j == 0) {
											arr.push(option.xAxis[0].data[i]);
										} else {
											arr.push(option.series[j-1].data[i]);
										}
									}
									dataSource.push(arr);
								}
								// 从dataSource中取出数据存入数据源（dataType）
								dataSource.map(item => dataType += `${item.join(',')}\n`); 
								// 使用Blob，获得二进制实例
								const csvData = new Blob([dataType], {
								    type: 'text/csv'
								});
								// 创建a标签
								const _a = document.createElement('a');
								_a.href = URL.createObjectURL(csvData);
								_a.target = '_blank';
								_a.download = `节点电源容量分布.csv`;
								document.body.appendChild(_a);
								_a.click();
								document.body.removeChild(_a);
		                   	},
			        	},
			        	saveAsImage: {name:"节点电源容量分布",icon:"image://../images/downpic.png"}
   				    }
				},
       			xAxis: { type: 'category',data: data.xAxisData },
       			yAxis: { name:"MW", },
       			axisLine: { show: true },
       			series: seriesData,
       		};

       		option && myChart.setOption(option);
       		window.addEventListener("resize", () => {
       			if(myChart){
       				myChart.resize()
       			}
       		})
		}
    }) 
    }

function echars(nodename,year) {
    $.ajax({
    	url : "../g/service/Sample/echars",
    	type:'post',
        contentType: 'application/json; charset=utf-8',
        data:JSON.stringify({"planid" : projectId ,"nodename": nodename , "yearid": year}),
        success : function(data){
        	let xData = [],yData = [];
       		for(item in data){
	       		xData.push(item);
	       		yData.push(data[item]);
       	  	}
        	var chartDom = document.getElementById('echars');
        	var myChart = echarts.init(chartDom);
        	var option;

        	option = {
	        	legend: {},
	        	xAxis: {
	        		type: 'category',
	        	    data: xData,
	        	},
	        	yAxis: {
	        		name:'MW',
	        	    type: 'value'
	        	},
	        	tooltip: {
	        		trigger: 'axis',
	        		axisPointer: {
	        			type: 'none'
	        		}
	        	},
	        	grid: {
	            	left: '3%',
	            	right: '5%',
	            	bottom:'4%',
	            	containLabel: true
	            },
				toolbox: {
					show: true,
					right: 30,
				    itemSize: 20,
					itemGap: 12,
			        feature: {
			        	myTool: {
		        			show: true,
			        		title: "导出为Excel",
			        		icon: 'image://../images/excel.png',
			        		onclick: (o) => {
								var option = o.option;
								var dataSource = [];
								var dataType = "\uFEFF"; //解决乱码问题
								dataType += option.xAxis[0].name+",";  //添加表格的头
								if(option.series.length > 0) {
									for(var i = 0;i < option.series.length;i++) {
										dataType += option.series[i].name+","
									}
									dataType = dataType.substr(0, dataType.length-1)
								}
								dataType += '\n'; // 以上是导出的Excel文件头部
	
								for(var i = 0;i < option.xAxis[0].data.length;i++) {
									var arr = [];
									for(var j = 0;j < option.series.length+1;j++) {
										if(j == 0) {
											arr.push(option.xAxis[0].data[i]);
										} else {
											arr.push(option.series[j-1].data[i]);
										}
									}
									dataSource.push(arr);
								}
								// 从dataSource中取出数据存入数据源（dataType）
								dataSource.map(item => dataType += `${item.join(',')}\n`); 
								// 使用Blob，获得二进制实例
								const csvData = new Blob([dataType], {
								    type: 'text/csv'
								});
								// 创建a标签
								const _a = document.createElement('a');
								_a.href = URL.createObjectURL(csvData);
								_a.target = '_blank';
								_a.download = `节点电源容量统计.csv`;
								document.body.appendChild(_a);
								_a.click();
								document.body.removeChild(_a);
		                   	},
				        },
			        	saveAsImage: {name:"节点电源容量统计",icon:"image://../images/downpic.png"}
					}
				},
	        	series: [{
	       	    	data:yData,
	       	       	type: 'bar',
	       	       	name: "合计"
	       	       	
	        	}]
			};
          
	       	option && myChart.setOption(option);
	    		window.addEventListener("resize", () => {
	   			if(myChart){
	   				myChart.resize()
	   			}
	   		})
		}
	})
}




function getQueryString (name){
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
	var r = window.location.search.substr(1).match(reg);
	return r ? unescape(r[2]) : null;
}


</script>
</html>